<template>
  <div class="project">
    <HeaderBar />

    <div class="card-one">
      <div class="card-left">
        <div class="title">项目信用</div>

        <div class="desc-wrapper">{{ config.p_one }}</div>
      </div>

      <div class="card-right">
        <img :src="'https://admin.xmzhuchen.com/' + config.p_one_image" />
      </div>
    </div>

    <img
      :src="'https://admin.xmzhuchen.com/' + config.p_two_image"
      style="width: 100%"
    />

    <div class="card-three">
      <div class="card-left">
        <div class="title">项目信用申请流程</div>
        <div class="desc-wrapper">{{ config.p_three }}</div>

        <img
          :src="'https://admin.xmzhuchen.com/' + config.p_three_image"
          class="project3"
        />
      </div>
      <div class="card-right">
        <img src="https://zszhuan.oss-cn-hangzhou.aliyuncs.com/images/0.jpg" />
        <div class="desc-item">
          <div class="desc-label">单位名称</div>
          <div class="desc-value">{{ account.name }}</div>
        </div>

        <div class="apply-project" @click="apply">
          申请新的项目信用
        </div>
        <div class="my-project" @click="$router.push('/user-center/project')">
          我的项目信用
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderBar from "@/components/headerBar/HeaderBar";
import storage from "@/utils/storage";
import { mapGetters } from "vuex";
export default {
  components: {
    HeaderBar
  },
  computed: {
    ...mapGetters(["account"])
  },
  methods: {
    apply() {
      if (this.account.applyStatus != 3) {
        this.$message.info("请先认证会员");
        return;
      }
      storage.removeItem("PROJECT_APPLY_STEP2");
      storage.removeItem("PROJECT_APPLY_STEP3");
      this.$router.push({
        path: "/project/apply/step1"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.project {
  .card-one {
    display: flex;
    padding: 24px;
    background: @white;
    margin: 16px 0;

    .card-left {
      flex: 1;

      .title {
        font-size: 24px;
        font-weight: bold;
      }

      .desc-wrapper {
        font-size: 18px;
        margin-top: 12px;
        color: @text-color-1;
      }
    }
    .card-right {
      img {
        width: 440px;
      }
    }
  }

  .card-three {
    display: flex;
    margin: 16px 0;

    .card-left {
      margin-right: 16px;
      background: @white;
      padding: 24px;
      flex: 1;

      .title {
        font-size: 24px;
        font-weight: bold;
      }

      .desc-wrapper {
        font-size: 18px;
        margin-top: 12px;
        color: @text-color-1;
      }

      .project3 {
        width: 76%;
        margin: 30px auto 0;
        display: block;
      }
    }

    .card-right {
      width: 360px;
      background: @white;
      padding: 24px 36px;
      text-align: center;

      img {
        width: 88px;
        border-radius: 50%;
        margin-bottom: 12px;
      }

      .desc-item {
        display: flex;
        justify-content: center;
        .desc-label {
          color: @text-color-2;
          font-size: 16px;
          margin-right: 16px;
        }

        .desc-value {
          font-size: 16px;
        }
      }

      .apply-project,
      .my-project {
        text-align: center;
        padding: 10px;
        color: @white;
        font-size: 16px;
        margin-top: 16px;
        cursor: pointer;
      }

      .apply-project {
        background: @red;
      }

      .my-project {
        background: @success-color;
      }
    }
  }
}
</style>
